/**
 * immutable:不可改变的，在计算中指一旦创建就不能再被更改的数据
 * 对Immutable对象的任何修改或删除操作都会返回一个新的Immutable对象
 * 实现的原理是:Persistent Data Structure(持久化数据结构)
 * - 用一种数据结构来保存数据
 * - 当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成不浪费
 */

import React, { useState } from "react";
import { fromJS } from "immutable";
import { Button } from "antd";

interface Props {
  name: string;
  age: number;
  citys: string[];
}

const initObj = fromJS<Props>({
  name: "xx",
  age: 28,
  citys: ["sh", "bj"]
});
const Immutable: React.FC = () => {
  const [obj, setObj] = useState(initObj);

  function change() {
    setObj(obj.setIn(["citys", 0], "hf"));
  }

  console.log("render");

  return (
    <>
      <h3>Immutable-不可变数据{obj.get("name")}</h3>
      <Button onClick={change}>改变</Button>
    </>
  );
};
export default Immutable;
